<template>
  <div class="template-list-component">
    <a-row gutter="16">
      <a-col :span="6">
        <router-link to="/">
          <a-card hoverable class="home-card">
            <template #cover>
              <img src="/images/1.jpg" />
              <div class="hover-item">
                <a-button size="large" type="primary">使用该模版创建</a-button>
              </div>
            </template>
            <a-card-meta title="春日活动海报">
              <template #description>
                <div class="description-detail">
                  <span>作者：breeze</span>
                  <span>
                    2
                    <UserOutlined />
                  </span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </router-link>
      </a-col>
      <a-col :span="6">
        <router-link to="/">
          <a-card hoverable class="home-card">
            <template #cover>
              <img src="/images/2.jpg" />
              <div class="hover-item">
                <a-button size="large" type="primary">使用该模版创建</a-button>
              </div>
            </template>
            <a-card-meta title="春日活动海报">
              <template #description>
                <div class="description-detail">
                  <span>作者：breeze</span>
                  <span>
                    2
                    <UserOutlined />
                  </span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </router-link>
      </a-col>
      <a-col :span="6">
        <router-link to="/">
          <a-card hoverable class="home-card">
            <template #cover>
              <img src="/images/3.jpg" />
              <div class="hover-item">
                <a-button size="large" type="primary">使用该模版创建</a-button>
              </div>
            </template>
            <a-card-meta title="春日活动海报">
              <template #description>
                <div class="description-detail">
                  <span>作者：breeze</span>
                  <span>
                    2
                    <UserOutlined />
                  </span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </router-link>
      </a-col>
      <a-col :span="6">
        <router-link to="/">
          <a-card hoverable class="home-card">
            <template #cover>
              <img src="/images/4.jpg" />
              <div class="hover-item">
                <a-button size="large" type="primary">使用该模版创建</a-button>
              </div>
            </template>
            <a-card-meta title="春日活动海报">
              <template #description>
                <div class="description-detail">
                  <span>作者：breeze</span>
                  <span>
                    2
                    <UserOutlined />
                  </span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </router-link>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue'
</script>

<style lang="less">
.template-list-component {}

.home-card {
  .description-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ant-card-cover {
    height: 600px;
    padding: 10px;

    .hover-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
      background: rgba(0, 0, 0, .8);
      align-items: center;
      justify-content: center;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &:hover {
    .hover-item {
      display: flex;
    }
  }
}
</style>
